<template>
	<!-- 农家乐收藏 -->
	<div class="body">
		<el-empty description="暂无数据" v-if="!houseData.length"></el-empty>
		<div class="HousesCard">
			<el-card class="box-card" v-for="(item,index) in houseData" :key="index.houseId">
				<div class="img">
					<img :src="$store.state.imgShowRoad2 + '/file/' + item.housePicture.split(',')[0]" />
				</div>
				<div class="HouseInfo">
					<div class="njl-name">
						<div class="njl-price">￥{{item.housePrice}}</div>
						<a href="javascript:;" @click="skipHouseInfo(item.houseId)">
							【{{item.houseRregion.split(',')[0]}}——
							  <template v-if="item.houseRregion.split(',').length < 3">
							    {{item.houseRregion.split(',')[1]}}】
							  </template>
							  <template v-else>
							    {{item.houseRregion.split(',')[2]}}】
							  </template>
							  <em style="font-style: normal;">{{item.houseName}}</em>
						</a>
					</div>
					<div class="introduce">
						{{item.description}}
					</div>
					<div class="addres"><em class="el-icon-s-promotion"></em>
					{{item.houseRregion.split(',')[0]}}
					  <template v-if="item.houseRregion.split(',').length < 3">
					    {{item.houseRregion.split(',')[1]}}
					  </template>
					  <template v-else>
					    {{item.houseRregion.split(',')[2]}}
					  </template>
					{{item.districtAddress}}
					</div>
				</div>
				<div class="tendency" @click="addCollectHouse(item.houseId,item.collectOrNot)">
					<img :src="item.collectOrNot === true ? shoucang.hover : shoucang.default" alt="收藏" />
					<span :class="{ 'hover': item.collectOrNot === true }">{{item.collectCount}}</span>
				</div>
			</el-card>
		</div>
		<div class="footer_page">
			<el-pagination @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pageSize"
				layout="total, prev, pager, next, jumper" :total="total"></el-pagination>
		</div>
	</div>
</template>

<script>
	import houseAPI from "@/api/farmHouse.js"
	export default {
		data() {
			return {
				total: 0,
				pageSize: 30,
				currentPage: 1,
				houseData: [],
				shoucang: {
					default: require('@/assets/images/shoucang.png'),
					hover: require('@/assets/images/shoucang2.png')
				},
			}
		},
		methods: {
			async getMyCollects() {
				const res = await houseAPI.getMyCollects("/ZnCollectHouse/getMyCollects", {
					currentPage: this.currentPage,
					pageSize: this.pageSize
				});
				if (res.code == 200) {
					this.houseData = res.data.records;
					this.total = res.data.total;
				}
			},
			handleCurrentChange(page) {
				this.currentPage = page;
				this.getMyCollects();
			},
			skipHouseInfo(item) {
				this.$router.push({ path: `/HouseInfoPage/${item}` }).catch(err => err);
			},
			async addCollectHouse(houseId,collectOrNot) {
				if (this.$store.getters.gettoken == null) {
					this.$message.warning('您还未登录！');
				} else {
					let collectOrNotBean = {
						houseId: houseId,
						collectStatus: collectOrNot === false ? 1 : 0
					};
					const res = await houseAPI.addCollectHouse("/ZnCollectHouse/addCollectHouse", collectOrNotBean);
					if (res.code == 200) {
						this.getMyCollects();
						this.$message.warning("取消收藏");
					}
				}
			},
		},
		created() {
			this.getMyCollects();
		}
	}
</script>

<style lang="scss" scoped>
	.HousesCard {
		width: 75%;
	
		.box-card {
			margin: 20px;
	
			::v-deep .el-card__body {
				display: flex;
			}
	
			.img {
				width: 20%;
				aspect-ratio: auto 150 / 120;
				height: 120px;
				border: 1px solid #f3f3f3;
				padding: 3px;
				text-anchor: middle;
				border-radius: 4px;
				margin-right: 20px !important;
	
				img {
					width: 100%;
					height: 100%;
				}
			}
	
			.HouseInfo {
				width: 78%;
	
				.njl-name {
					margin: 0 0 5px 0;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
	
					.njl-price {
						width: auto;
						height: 35px;
						line-height: 25px;
						float: right;
						margin-right: 20px;
						font-size: 18px;
						font-weight: bold;
						color: #ff061a;
					}
	
					a {
						font-weight: bold !important;
						outline-style: none;
						outline-color: invert;
						outline-width: medium;
						text-decoration: none;
						font-size: 16px;
						color: #2e2e2e;
					}
	
					a:hover {
						color: #ff061a;
					}
	
				}
	
				.introduce {
					color: #666;
					font-size: 14px;
					display: -webkit-box;
					/* 将元素以弹性盒子方式显示 */
					-webkit-line-clamp: 3;
					/* 设置文本行数，超过三行将被截断 */
					-webkit-box-orient: vertical;
					/* 设置文本排列方向为垂直 */
					overflow: hidden;
					/* 超出隐藏 */
					text-overflow: ellipsis;
					/* 使用省略号显示超出部分 */
				}
	
				.addres {
					margin-top: 30px;
					font-size: 12px;
					color: #999;
					margin-top: 5px;
					vertical-align: middle;
				}
			}
			.tendency {
				display: flex;
				align-items: center;
				color: #909090;
				margin-left: 30px;
				img {
					margin: 0;
					width: 24px;
				}
			
				span {
					font-family: PingFangSC-Regular;
					font-size: 20px;
			
				}
			}
		}
	}
</style>